<template>
  <!-- 答题 -->
  <div class="bg">
      <!-- logo+标题 -->
    <div class="top">
      <img src="../assets/100.png" alt="logo" class="logo animated fadeInUp" />
      <h1 class="tit animated bounceInDown">答题测试</h1>
    </div>

<!-- 答题框 -->
<div class="test">
    <div class="tests animated fadeInRightBig" v-show="one">
      <p>1.中国共产党成立地点在哪</p>
      <p @click="t1">A 浙江嘉兴</p> <!-- 正确 -->
      <p @click="f1">B 北京朝阳</p>
      <p @click="f1">C 湖南衡阳</p>
      <p @click="f1">D 浙江杭州</p>
    </div>
    <div class="tests animated fadeInRightBig" v-show="two">
      <p>2.中共二大召开的时间是</p>
      <p @click="f2">A 1921年7月3日</p>
      <p @click="t2">B 1922年7月16日</p> <!-- 正确 -->
      <p @click="f2">C 1922年9月16日</p>
      <p @click="f2">D 1923年5月4日</p>
    </div>
    <div class="tests animated fadeInRightBig" v-show="three">
      <p>3.香港回归时间</p>
      <p @click="f3">A 1999年12月20日</p>
      <p @click="t3">B 1997年7月1日</p> <!-- 正确 -->
      <p @click="f3">C 1997年9月1日</p>
      <p @click="f3">D 1999年7月1日</p>
    </div>
    
    <div class="tests animated fadeInRightBig" v-show="four">
      <p>4.十一届三中全会由谁主持</p>
      <p @click="f4">A 叶剑英</p>
      <p @click="f4">B 邓小平</p>
      <p @click="t4">C 华国锋</p> <!-- 正确 -->
      <p @click="f4">D 李先念</p>
    </div>
    <!-- 显示分数 -->
    <div class="num" v-show="num">
      <div class="box" v-show="hege">
        <h2 class="score animated fadeInUp">恭喜获得{{score}}分!</h2>
        <img src="../assets/hege.png" alt="合格" class="box_img animated 
bounceIn">
      </div>

        <div class="box" v-show="buhege">
          <h2 class="score animated fadeInUp">很遗憾获得{{score}}分</h2>
          <img src="../assets/buhege.png" alt="不合格" class="box_img animated 
bounceIn">
        </div>
        
    </div>
</div>

  <!-- 步骤条 -->
    <div class="bzt">
       <el-steps :space="70" :active="active" finish-status="success">
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
    </el-steps> 
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      one:true,
      two:false,
      three:false,
      four:false,
      num:false,
      score:0,
      hege:false,
      buhege:false,
      active:5
    }
  },

  methods: {
    t1() {
      this.score += 25;
      this.one = false;
      this.two = true;
    },
    f1() {
      this.one = false;
      this.two = true;
    },

    t2() {
      this.score += 25;
      this.two = false;
      this.three = true;
    },
    f2() {
      this.two = false;
      this.three = true;
    },

    t3() {
      this.score += 25;
      this.three = false;
      this.four = true;
    },
    f3() {
      this.three = false;
      this.four = true;
    },

     t4() {
      this.score += 25;
      this.four = false;
      this.num = true;
      this.active = 6;
      if(this.score >= 60) {
        this.hege = true;
      } else {
        this.buhege = true;
      }
    },
    f4() {
      this.four = false;
      this.num = true;
      this.active = 6;
      if(this.score >= 60) {
        this.hege = true;
      } else {
        this.buhege = true;
      }
    },
  },
}
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  background-image: url("../assets/bg2.png");
  background-size: 100% 100%;
  z-index: -2;
  float: left;
}

.top {
    width: 20rem;
    height: 15rem;
    /* background-color: crimson; */
    margin: auto;
    margin-top: 1%;
}
.logo{ 
    width: 100%;
    height: 50%;
}
.tit{
    text-align: center;
}

/* 答题框样式 */
.test{
  width: 30rem;
  height: 20rem;
  background-color: #de0010; 
  margin: auto;
  box-shadow: 9px 7px 4px rgb(165, 165, 165);
  border: 1px solid rgb(180, 177, 177);
}
.test p {
  margin: auto;
  padding: 0.5rem;
  font-size: 20px;
  color: rgb(238, 240, 223);
  font-weight: 600;
  cursor: pointer;
}

.tests {
  margin-top: 5%;
}

.num {
  width: 100%;
  height: 90%;
}
.box {
  width: 100%;
  height: 100%;
}
.score{
  text-align: center;
}
.box_img{
  width: 50%;
  height: 65%;
  margin-left: 25%;
}
 .bzt{
    width: 30rem;
    position: absolute;
    left: 40%;
    top: 90%;
   
}
</style>